<template>
  <div id="container">
    <el-container :style="{ height: screenHeight }">
      <el-header>
        <el-row>
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              房屋产权产籍管理系统
            </div></el-col
          >
          <el-col :span="19"
            ><div class="grid-content bg-purple-light y">
              <el-col :span="5"> 西安市房产管理局 </el-col>
              <el-col :span="4"> 操作人:{{ user.realName }} </el-col>
              <el-col :span="3">
                <div class="whether zz">
                  <div id="he-plugin-simple"></div>
                </div>
              </el-col>
              <el-col :span="6">
                {{ nowDate }}
              </el-col>
            </div></el-col
          >
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <el-avatar :size="45" :src="circleUrl" class="x"></el-avatar>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">个人中心</el-dropdown-item>
                  <el-dropdown-item command="b">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="210px">
          <main-menu></main-menu
          ><!--使用组件-->
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//引入创建的MainMenu.vue
import MainMenu from "@/components/MainMenu";
export default {
  data() {
    return {
      screenHeight: document.documentElement.clientHeight + "px",
      user: "",
      nowDate: null,
      nowtimer: "",
      circleUrl: "",

    };
  },
  created() {
    this.$router.push("/Shi");
    this.nowtimer = setInterval(this.gettime, 1000);
    this.user = JSON.parse(sessionStorage.getItem("user"));
    this.circleUrl = JSON.parse(sessionStorage.getItem("user")).headImg;
    window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: "5",
        tmpColor: "black",
        tmpSize: "16",
        cityColor: "black",
        citySize: "16",
        aqiColor: "black",
        aqiSize: "16",
        weatherIconSize: "24",
        alertIconSize: "18",
        padding: "10px 10px 10px 10px",
        shadow: "0",
        language: "auto",
        fixed: "false",
        vertical: "top",
        horizontal: "left",
        city: "CN101110101",
        float: "false",
        key: "f70898de9e0b48eda4380c31d69dfd1d",
      },
    };
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  methods: {
    //获得本地时间
    gettime() {
      this.nowDate = new Date().toLocaleString();
    },
    // 退出
    logout() {
      //请求路径默认为/logout
      this.$axios.delete("/auth-serv/users/logout").then((res) => {
        if (res.data.code == 200) {
          //清空localStorage对应的信息
          sessionStorage.removeItem("menuList");
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("user");
          this.$message.success(res.data.msg);
          //跳转到登录页面
          this.$router.push("/");
        }
      });
    },
    // logout() {
    //   sessionStorage.removeItem("menuList");
    //   localStorage.removeItem("token");
    //   localStorage.removeItem("user");
    //   //跳转到登录页面
    //   this.$router.push("/");
    // },
    // 头像的点击事件
    handleCommand(command) {
      if (command === "a") {
        alert("你还对自己不了解吗？还要啥个人中心");
      } else {
        this.logout();
      }
    },
  },
  components: {
    //绑定组件
    MainMenu,
  },
};
</script>

<style>
.img {
  float: left;
  position: absolute;
  z-index: 9999;
  margin-left: -400px;
  margin-top: 3px;
  color: #ffffff;
}
.zz {
  margin-top: 8px;
  position: absolute;
  z-index: 9999;
  margin-left: 180px;
}
.y {
  margin-left: 500px;
  margin-top: 15px;
}
.x {
  margin-top: 10px;
}
.el-header,
.el-footer {
  background-color: #192537;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #222d3c;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
